<template>
<div class="graph-wrapper content">
    <Spin size="large" fix v-if="loading"></Spin>
    <div class="full-top-menu border-bottom">
        <span class="f-b pointer" @click="saveBack">所有分组</span>
        <span class="p-lr-15">></span>
        <span class="f-b">新增指标元件</span>
        <div class="f-r m-r-20">
            <a @click="save"> 保存</a>
        </div>
    </div>
    <div class="graph-main">
        <!-- 左侧和中间图表部分   主要是生成维度和图表  各种数值字段拖拽 筛选条件
            DataSource
         -->
        <add-graph-left ref="graphleft"
            :filter-list="conditions">
        </add-graph-left>
    </div>
</div>
</template>

<script>
import getData from  'getData'
//DataSource
import addGraphLeft from './add-graph/add-graph-left'
import util from 'util'

export default {
    components:{addGraphLeft},
    data () {
        return {
            loading:false,
            //过滤器 todo
            conditions:[
                {
                    dataType:'int',
                    columnName:' '
                }
            ],
            color: '#f00'
        }
    },
    methods: {
        init(){
            this.$store.commit("setNavState",false);
        },

        saveBack(){
            var data = this.$refs.graphleft.getDataSoure();
            if(data.groups.length==0&& data.numbers.length==0){
                this.back();
            }else  {
                this.$Modal.confirm({
                    title: '提示',
                    content: '当前有未保存的图表信息, 是否继续退出?',
                    onOk: () => {
                        this.back();
                    }
                })
            }
        },
        save(){
            var data = this.$refs.graphleft.getDataSoure();
            let directGraph = ['text', 'img']
            if(data.groups.length==0&& data.numbers.length==0 && directGraph.indexOf(data.graphType) === -1){
                this.$Message.error('请生成图表')
            }else  if(data.graphName ==''){
                this.$Message.error('请输入图表名')
            }else  if(data.classficationId ==null  || data.classficationId==''){
                this.$Message.error('请选择分组')
            }else{
                // this.loading =true;
                var options  =util.util.cloneObj(data.graphOptions);
                options.dataset={};
                var param ={
                    classficationId:data.classficationId ,
                    graphOptions:JSON.stringify(options),
                    graphType:data.graphType,
                    graphName:data.graphName,
                    datasource:JSON.stringify(data.datasource),
                    graphUrl:data.graphUrl,
                    groups:data.groups,
                    numbers:data.groups,
                    graphId:data.graphId,
                    datasourceId:data.datasourceId,
                    remark:data.remark,
                    graphTag:data.graphTag
                };
                getData.post('saveGraph',param).then(res=>{
                    if (res.status == 200 && res.data.code == '000') {
                        this.datasourceList = res.data.data;
                        this.$Message.success('保存成功');
                        this.loading=false;
                        this.back();
                    }else{
                        this.$Message.error(res.data.errorMsg);
                        this.loading=false;
                    }
                });
            }

        },
        back(){
            this.$router.push({
                path:'/graph',
                query: {
                  catalogId: this.$route.query.catalogId
                }
            })
        }
    },
    mounted(){
        this.init();
    },
    beforeRouteLeave (to, from, next) {
        this.$destroy();
        next();
    }
}
</script>
